<template>
  <div id="topDiv">
    <div>
      <h1>Vue-Router Basic - 01</h1>
    </div>
    <div style="margin-top: 50px">
      <div class="butDiv">
        <!--to：代表路由要跳转的位置-->
        <router-link style="text-decoration:none" class="pClass" to="/about">About</router-link>
      </div>
      <div class="butDiv">
        <router-link style="text-decoration:none" class="pClass" to="/home">Home</router-link>
      </div>
      <div id="contentDiv">
        <h2 style="padding-left: 50px;font-size: 20px;">
          <!--缓存路由组件的数据，eg：在router-view中存在input标签时，
          input标签中输入数据，然后访问其他路由，再切换到本路由，则已输入的数据依然在-->
          <keep-alive>
            <!--展示路由后的信息-->
            <!--路由之间的数据传递，方式三，注意这里的属性msg前面没有冒号，不然msg就成了变量-->
            <router-view msg="路由之间传递数据方式二"></router-view>
          </keep-alive>
        </h2>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

<style scoped>

  #topDiv {
    margin-top: 100px;
    margin-left: 300px
  }

  #contentDiv {
    float: left;
    margin-left: 200px;
    margin-top: -110px;
    width: 90%;
    margin-left: 10%;
    height: 110px
  }

  .butDiv {
    border: 1px solid #f7f3ff;
    width: 10%;
    float: top
  }

  .pClass {
    color: #5f5d64;
    padding-left: 30px;
    font-size: 40px;
  }

  /*给选中的路由增加样式，默认选中的路由会增加此class属性*/
  .router-link-active {
    color: red;
  }
</style>
